<template>
<div>
  <div class="header">
    <el-tooltip effect="light" content="消息" placement="left">
      <i class="el-icon-bell"></i>
    </el-tooltip>
    <el-tooltip effect="light" content="退出登录" placement="left">
      <i class="el-icon-switch-button" @click="logoutFn"></i>
    </el-tooltip>
    <el-dropdown trigger="hover" :show-timeout="250" :hide-timeout="150" @command="checkAvatarMenu">
      <el-avatar class="avatar" size="medium" shape="circle" :src="require('../../assets/avatar.jpg')" alt="图片暂时无法加载" @error="avatarError"></el-avatar>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in downInfo" :key="item" :command="item">{{ item }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

  </div>
  <div class="mainContent" :style="{height:mainHeght}">
    <div class="mainMenus">
      <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
        <el-menu-item index="/dashboard"><i class="el-icon-s-custom"></i>首页</el-menu-item>
        <el-submenu index="1">
          <template v-slot:title>
            <i class="el-icon-s-custom"></i>
            <span>个人中心</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/base">基本信息</el-menu-item>
            <el-menu-item index="/personal">个人中心</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/vueawesomeswiper"><i class="el-icon-s-custom"></i>轮播组件</el-menu-item>
        <el-menu-item index="/luckysheet"><i class="el-icon-s-custom"></i>excel预览</el-menu-item>
        <el-menu-item index="/echarts"><i class="el-icon-s-custom"></i>echarts图表</el-menu-item>
        <el-menu-item index="/event"><i class="el-icon-s-custom"></i>$event测试</el-menu-item>
        <el-menu-item index="/dyszhdh"><i class="el-icon-s-custom"></i>多元素组合动画</el-menu-item>
        <el-menu-item index="/BoundaryCollisionDetection"><i class="el-icon-s-custom"></i>边界碰撞检测</el-menu-item>
      </el-menu>
    </div>
    <div class="mainPages">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>

    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      downInfo: ["个人信息", "我的消息"],
      mainHeght: '',
      name: ''
    }
  },
  mounted() {
    this.mainHeght = innerHeight - 60 + "px";
  },
  methods: {
    avatarError(e) {
      console.log(e);
    },
    checkAvatarMenu(command) {
      console.log(command);
    },
    myName() {
      this.$axios({
        method: "get",
        url: 'http://localhost:8080/test',
      }).then(res => {
        if (res.status === 200) {
          this.name = res.data
        }

      })
    },
    logoutFn(){

    }
  },
}
</script>

<style scoped>
.header {
  height: 60px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: rgb(92, 218, 223);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header i {
  font-size: 24px;
  padding-right: 20px;
  cursor: pointer;
}

.avatar {
  cursor: pointer;
}

.mainContent {
  width: 100%;
  display: flex;

}

.mainMenus {
  background-color: #545c64;
  width: 15%;
}

.mainPages {
  width: 85%;
  padding: 10px;
}
</style>
